import Image from 'next/image'
import databaseSrc from '@/public/img/database.svg'
import policeSrc from '@/public/img/police.svg'
import caseSrc from '@/public/img/case.svg'
import riskSrc from '@/public/img/risk.svg'
import { fillValueHelper } from '@/utils/common'

function MetricsIcon ({ type }) {
    if (type === 'database') {
        return (
            <div className='p-4 bg-[#34b7b919] rounded-md'>
                <Image
                    src={databaseSrc}
                    width={50}
                    height={50}
                    alt='database'
                />
            </div>
        )
    }

    if (type === 'police') {
        return (
            <div className='p-4 bg-[#02a7f019] rounded-md'>
                <Image
                    src={policeSrc}
                    width={50}
                    height={50}
                    alt='police'
                />
            </div>
        )
    }

    if (type === 'case') {
        return (
            <div className='p-4 bg-[#f59a2319] rounded-md'>
                <Image
                    src={caseSrc}
                    width={50}
                    height={50}
                    alt='case'
                />
            </div>
        )
    }

    if (type === 'risk') {
        return (
            <div className='p-4 bg-[#d9001b19] rounded-md'>
                <Image
                    src={riskSrc}
                    width={50}
                    height={50}
                    alt='risk'
                />
            </div>
        )
    }

    return null
}

function MetricsValue ({ type, value }) {
    if (type === 'database') {
        return (
            <div className='ml-8 flex flex-col justify-between py-1'>
                <div>
                    <span className='text-base'>
                        纠纷总数
                    </span>
                </div>
                <div>
                    <span className='text-2xl'>
                        {fillValueHelper(value)}
                    </span>
                </div>
            </div>
        )
    }

    if (type === 'police') {
        return (
            <div className='ml-8 flex flex-col justify-between py-1'>
                <div>
                    <span className='text-base'>
                        警情数量
                    </span>
                </div>
                <div>
                    <span className='text-2xl'>
                        {fillValueHelper(value)}
                    </span>
                </div>
            </div>
        )
    }

    if (type === 'case') {
        return (
            <div className='ml-8 flex flex-col justify-between py-1'>
                <div>
                    <span className='text-base'>
                        案件数量
                    </span>
                </div>
                <div>
                    <span className='text-2xl'>
                        {fillValueHelper(value)}
                    </span>
                </div>
            </div>
        )
    }

    if (type === 'risk') {
        return (
            <div className='ml-8 flex flex-col justify-between py-1'>
                <div>
                    <span className='text-base'>
                        高危纠纷
                    </span>
                </div>
                <div>
                    <span className='text-2xl'>
                        {fillValueHelper(value)}
                    </span>
                </div>
            </div>
        )
    }

    return null
}

export default function MetricsCard ({ type, value, isClicked, }) {
    return (
        <div
            className={`py-6 px-8 rounded-md w-full h-full flex hover:shadow-lg ${isClicked ? 'border border-primary' : ''}`}
        >
            <MetricsIcon type={type} />
            <MetricsValue type={type} value={value}/>
        </div>
    )
}